<!-- 自定义修饰符 -->
<template>
  <input v-if="!myValue" type="text" :value="modelValue" @input="emitFun1">
  <input v-else type="text" :value="myValue" @input="emitFun2">
</template>

<script>
  import {ref} from 'vue'
  export default {
    name: "CustomModifiers",
    props: {
      modelValue: String,
      modelModifiers: {
        default: () => ({})
      },
      myValue: String,
      myValueModifiers: {
        default: () => ({})
      }
    },
    emits: ['update:modelValue', 'update:myValue'],
    setup(props, {emit}) {
      function emitFun1(e) {
        let val = e.target.value
        if (props.modelModifiers.my) {
          val = val.charAt(0).toUpperCase() + val.slice(1)
        }
        emit('update:modelValue', val)
      }
      function emitFun2(e) {
        let val = e.target.value
        if (props.myValueModifiers.my) {
          val = val.toUpperCase()
        }
        emit('update:myValue', val)
      }
      return {
        emitFun1,
        emitFun2
      }
    }
  }
</script>

<style scoped>
  input {
    width: 100%;
    height: 30px;
  }
</style>
